<template>
  <div class="section content theme">
    <div class="center flex_row flex_between" style="padding:8px">
      <div class="left flex_col">
        <div class="sort">
          最新
          <Divider type="vertical" />最热
          <!-- <Tag style="margin-left:10px;" closable @on-close="handleClose">标签三</Tag> -->

          <Icon class="reload" @click="reloadPage" type="md-aperture" title="刷新" size="22" />
        </div>
        <template v-for="item in list">
          <router-link to="/art_detail" :key="item.id">
            <Art :item="item" />
          </router-link>
        </template>

        <div class="none_list" v-if="!list.length">别问，问就是搜不到</div>
      </div>
      <div class="right">
        <Tag @changeTag="changeTag" />
        <Class @changeClass="changeClass" />
      </div>
    </div>
  </div>
</template>

<script>
import Art from "@/components/Art.vue";
import Tag from "@/components/Right/Tag.vue";
import Class from "@/components/Right/Class.vue";

import { mapActions, mapState } from "vuex";
import { mixin } from "@/utils/mixin";

import debounce from "lodash/debounce";

import Cookie from 'js-cookie'
export default {
  mixins: [mixin],
  components: {
    Tag,
    Class,
    Art
  },
  computed: {
    ...mapState(["art_list"])
  },
  data() {
    return {
      query: {
        limit: 10,
        page: 1,
        tag: "",
        class_id: "",
        keywords: ""
      },
      total:0,
      isBottom: false,
      list: []
    };
  },
  mounted() {
    this.query.page = 1;
    this.getList();
    window.addEventListener("scroll", this.handleScroll);
    this.$bus.$on("search", this.searchHandler);
  },
  beforeDestroy() {
    this.$bus.$off("search", this.searchHandler);
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    //重置query
    resetQuery() {
      this.list = [];
      this.query.page = 1;
    },
    searchHandler(e) {
      this.query.keywords = e;
    },
    async getList() {
      if (this.isBottom) return;
      // if(this.total = this.list.length ) return;
      this.isBottom = true;
      console.log("请求开始，当前页数 :" + this.query.page);
      const res = await this.$api.artApi.getArts(this.query);
      this.list = this.list.concat(res.data.data.rows);
      this.total =  res.data.data.count;
      this.isBottom = false;
      this.query.page = ++this.query.page;
    },
    changeClass(class_id) {
      this.resetQuery();
      this.query.class_id = class_id;
      this.getList();
    },
    changeTag(tag) {
      this.resetQuery();
      this.query.tag = tag;
      this.getList();
    },
    reloadPage() {

    },
    async handleScroll() {
      let scrollTop = document.documentElement.scrollTop; // 屏幕滚动高度
      let innerHeight = document.querySelector("#app").clientHeight; // 容器高度
      let outerHeight = document.documentElement.clientHeight; // 屏幕高度
      if (outerHeight + scrollTop >= innerHeight) {
        if(this.total <= this.list.length ) return;
        this.getList(this.query);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.sort {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
}
.reload {
  margin-left: auto;
  cursor: pointer;
  &:hover {
    color: #3963bc;
  }
}
.pagation {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.none_list {
  margin: 200px auto;
  font-size: 26px;
  font-weight: bold;
  color: #eee;
}
</style>